// pages/cart/component/cart.js
// 导入 debounce 防抖方法
import { debounce } from 'miniprogram-licia'
import {
  reqCartList,
  reqUpdateChecked,
  reqCheckAllStatus,
  reqAddCart,
  reqDelCartGoods
} from "@/api/cart"
import {swipeCellBehavior} from "@/behavior/swipeCell"
import {  ComponentWithStore} from "mobx-miniprogram-bindings"
import {
  userStore
} from '@/store/userstore'

// 导入，miniprogram-computed（旧版）
const computedBehavior = require('miniprogram-computed').behavior
ComponentWithStore({
  //让页面和store对象建立关联
  behaviors: [computedBehavior,swipeCellBehavior],
  storeBindings: {
    store: userStore,
    fields: ['token'],
    actions: []
  },
  computed:{
    selectAllStatus(data){
      // computed中要获取data中的数据不能用this，需要借助形参
      return data.cartList.length !==0 && data.cartList.every(item => item.isChecked ===1)
    },
    // 计算订单总金额
    totalPrice(data) {
      // 用来对订单总金额进行累加
      let totalPrice = 0
      data.cartList.forEach((item) => {
        // 需要判断商品是否是选中的状态，isChecked 是否等于 1
        if (item.isChecked === 1) {
          totalPrice += item.price * item.count
        }
      })

      return totalPrice
    }
  },
  // 组件的属性列表
  properties: {},

  // 组件的初始数据
  data: {
    cartList: [],
    emptyDes: '还没有添加商品，快去添加吧～'
  },

  // 组件的方法列表
  methods: {
    // 更新商品的购买状态
    async updateChecked(event) {
      console.log(event)
      // 获取最新的购买状态
      const {
        detail
      } = event

      // 获取传递的 商品 ID 以及 索引
      const {
        id,
        index
      } = event.target.dataset
      // 将最新的购买状态转换成后端接口需要使用的 0 和 1
      const isChecked = detail ? 1 : 0
      // 调用接口更新服务器的购买状态
      const res = await reqUpdateChecked(id, isChecked)
      if (res.code === 200) {
        // 服务器更新购买状态成功以后，获取最新的购物车列表数据更新状态
        // this.showTipGetList()

        // 通过更新本地的数据来更新页面的购买状态
        this.setData({
          [`cartList[${index}].isChecked`]: isChecked
        })
      }
    },
    //展示文案，同时获取购物车列表数据
    async showTipGetList() {
      const {
        token
      } = this.data
      if (!token) { // 用户未登录
        this.setData({
          emptyDes: '您尚未登录，点击登录按钮获取更多权益',
          cartList: []
        })
        return
      }
      // 用户登录了
      const {
        code,
        data: cartList
      } = await reqCartList()
      if (code === 200) {
        this.setData({
          cartList: cartList,
          emptyDes: cartList.length === 0 && '还没有添加商品，快去添加吧~'
        })
      }
    },
    // 获取购物车列表数据
    async getCartList() {
      const res = await reqCartList()
      this.setData({
        cartList: res.data
      })
    },
    // 全选按钮
    async seletAll(event){
      // console.log(event) 
      const {detail}= event
      const isChecked = detail ? 1:0

      // 调用接口，实现全选和全不选功能
      const res = await reqCheckAllStatus(isChecked)
      // console.log(res,'cs')
      if (res.code === 200) {
        // this.showTipGetList() 

        // 对购物车列表数据进行深拷贝
        const newCartList = JSON.parse(JSON.stringify(this.data.cartList))
        newCartList.forEach((item) => (item.isChecked = isChecked))

        // 对 cartList 进行赋值，驱动视图更新
        this.setData({
          cartList: newCartList
        })
      }

    },
    // 更新购买的数量
    changeBuyNum: debounce(async function (event) {
      // 获取最新的购买数量
      // 如果用户输入的购买数量大于 200，需要把购买数量设置为 200
      // 最大购买数量是 200，目前购买数量是 1，假设用户输入了 666，666 - 1 = 665，665 + 1 = 666
      // 最大购买数量是 200，如果用户输入的购买数量是 666，重置为 200， 200 - 1 = 199，199 + 1 = 200
      const newBuyNum = event.detail > 200 ? 200 : event.detail

      // 获取商品的 id、索引、之前的购买数量
      const { id, index, oldbuynum } = event.target.dataset

      // 使用正则验证用户输入的购买数量，是否是 1-200 之间的正整数
      const reg = /^([1-9]|[1-9]\d|1\d{2}|200)$/

      // 对用户输入的值进行验证，验证通过 true，验证失败 false
      const regRes = reg.test(newBuyNum)

      // 如果验证没有通过，说明用户输入的购买数量不合法或者小于 1，需要还原为之前的购买数量
      if (!regRes) {
        this.setData({
          [`cartList[${index}].count`]: oldbuynum
        })

        // 如果验证没有通过，需要阻止代码继续往下运行
        return
      }

      // 如果验证通过，就需要计算差值，然后把差值发送给公司的服务器，让服务器进行逻辑处理
      const disCount = newBuyNum - oldbuynum
      // 判断购买数量是否发生了改变，如果购买数量没有发生改变，不发送请求
      if (disCount === 0) return

      // 如果购买数量发生了改变，需要调用接口，传递差值
      const res = await reqAddCart({ goodsId: id, count: disCount })

      // 如果服务器更新购买数量成功，需要更新本地的购买数量
      if (res.code === 200) {
        this.setData({
          [`cartList[${index}].count`]: newBuyNum,
          // 如果购买数量发生了变化，需要让当前商品变成选中的状态
          [`cartList[${index}].isChecked`]: 1
        })
      }
    }, 500),
    // 删除商品
    async delCartGoods(event){
      const { id } = event.currentTarget.dataset
      const res = await wx.modal({title:'提示',content:"是否删除该商品？"})
      if(res){
        await reqDelCartGoods(id)
        wx.toast({title:"删除成功！"})
        this.showTipGetList()
      }     
    },
    // 跳转到订单结算页面
    toOrder() {
      // 判断用户是否勾选了商品，如果没有勾选商品，不进行跳转
      if (this.data.totalPrice === 0) {
        wx.toast({
          title: '请选择需要购买的商品'
        })
        return
      }

      wx.navigateTo({
        url: '/modules/orderPayModule/pages/order/detail/detail'
      })
    },
    onShow() {
      // console.log('token', this.data.token)
      this.showTipGetList()
    }
  },
})